<template>
  <div>
    <div class="form">
        <!-- 游戏区服 -->
        <div class="form-item">
            <text class="label">游戏区服</text>
            <el-cascader placeholder="请选择您所在的区服" v-model="formData.selectedServer" :options="serverTree"
                style="width: 200px;margin-bottom: 10px;" />
            <!-- <div class="handle" @click="showServerPicker">
                <view class="selected-tag">
                    {{ `${serverTree[selectedGroupIndex].text}/${selectedServer}` || '请选择您所在的区服' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>

        <!-- 代练类型 -->
        <div class="form-item">
            <text class="label">代练类型</text>
            <el-select v-model="formData.mode" placeholder="请选择代练类型" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in modeTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showModePicker">
                <view class="selected-tag">
                    {{ mode || '请选择代练类型' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>

        <!-- 物资 -->
        <div class="form-item" v-if="formData.mode == '物资'" style="width: 400px;">
            <text class="label">物资</text>
            <el-radio-group v-model="formData.selectMaterial">
                <el-radio value="护航" size="large" border>护航</el-radio>
                <el-radio value="非洲之心" size="large" border>非洲之心</el-radio>
                <el-radio value="哈夫币" size="large" border>哈夫币</el-radio>
            </el-radio-group>
            <!-- <div class="handle" style="width: 100%;">
                <view class="selected-tag" style="width: 100%;">
                    <el-radio-group v-model="formData.selectMaterial">
                        <el-radio value="护航" size="large" border>护航</el-radio>
                        <el-radio value="非洲之心" size="large" border>非洲之心</el-radio>
                        <el-radio value="哈夫币" size="large" border>哈夫币</el-radio>
                    </el-radio-group>

                </view>
            </div> -->
        </div>
        <!-- 保险格数 -->
        <div class="form-item" v-if="!formData.insuranceFlag && formData.mode == '物资'" style="align-items: center;"></div>
        <div class="form-item" v-if="formData.insuranceFlag && formData.mode == '物资'" style="align-items: center;">
            <text class="label">保险格数</text>
            <el-radio-group v-model="formData.selectInsurance">
                <el-radio style="margin-bottom: 10px;" value="1格" size="large" border>1格</el-radio>
                <el-radio style="margin-bottom: 10px;" value="2格" size="large" border>2格</el-radio>
                <el-radio style="margin-bottom: 10px;" value="3格" size="large" border>3格</el-radio>
                <el-radio style="margin-bottom: 10px;" value="4格" size="large" border>4格</el-radio>
                <el-radio style="margin-bottom: 10px;" value="5格" size="large" border>5格</el-radio>
                <el-radio style="margin-bottom: 10px;" value="6格" size="large" border>6格</el-radio>
            </el-radio-group>
            <!-- <div class="handle" style="width: 100%;">
                <view class="selected-tag">
                    <el-radio-group v-model="formData.selectInsurance">
                        <el-radio value="1格" size="large" border>1格</el-radio>
                        <el-radio value="2格" size="large" border>2格</el-radio>
                        <el-radio value="3格" size="large" border>3格</el-radio>
                        <el-radio value="4格" size="large" border>4格</el-radio>
                        <el-radio value="5格" size="large" border>5格</el-radio>
                        <el-radio value="6格" size="large" border>6格</el-radio>
                    </el-radio-group>
                </view>
            </div> -->
        </div>

        <!-- 是否有保险 -->
        <div class="form-item" v-if="formData.mode == '物资'"
            style="flex-direction: row;justify-content: start;align-items: center;">
            <text class="label" style="width: 50%;margin-bottom: 0;">是否有保险</text>
            <el-checkbox color="#57b1ff" size="large" :value="insuranceFlag" :checked="insuranceFlag"
                @click="changeInsuranceFlag"></el-checkbox>
            <!-- <div class="handle">
                <view class="selected-tag">
                    <el-checkbox color="#57b1ff" size="large" :value="insuranceFlag" :checked="insuranceFlag"
                        @click="changeInsuranceFlag"></el-checkbox>
                </view>
            </div> -->
        </div>

        <!-- 保底物资数量 -->
        <div class="form-item" v-if="formData.mode == '物资' && formData.selectMaterial == '护航'">
            <text class="label">保底物资数量</text>
            <el-select v-model="formData.selectedGuaranteedMaterials" placeholder="请选择保底物资数量" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in guaranteedMaterialsTree" :key="index" :label="item.text"
                    :value="item.value" />
            </el-select>
            <!-- <div class="handle" @click="showGuaranteedMaterialsPicker">
                <view class="selected-tag">
                    {{ selectedGuaranteedMaterials || '请选择保底物资数量' }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 订单任务 -->
        <div class="form-item" v-if="formData.mode == '物资' && formData.selectMaterial == '非洲之心'">
            <text class="label">订单任务</text>
            <el-select v-model="formData.order" placeholder="请选择订单任务" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in orderTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
        </div>
        <!-- 哈夫币数量 -->
        <div class="form-item" v-if="formData.mode == '物资' && formData.selectMaterial == '哈夫币'">
            <text class="label">哈夫币数量</text>
            <el-select v-model="formData.hafu" placeholder="请选择您完成的哈夫币数量" size="large"
                style="width: 200px;margin-bottom: 10px;">
                <el-option v-for="(item, index) in hafuTree" :key="index" :label="item.text" :value="item.value" />
            </el-select>
        </div>
        <!-- 等级任务 -->
        <div class="form-item" v-if="formData.mode == '等级'">
            <text class="label">等级任务</text>
            <el-input v-model="formData.currentLevel" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入当前等级" />
            <el-input v-model="formData.toLevel" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入目标等级" />
            <!-- <div class="handle" @click="showCurrentLevelPicker">
                <view class="selected-tag">
                    {{ (formData.currentLevel === '' && formData.toLevel === '') ? '请输入等级任务' :
                        `${formData.currentLevel}级-${formData.toLevel}级`
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>
        <!-- 保险箱数量 -->
        <div class="form-item" v-if="formData.mode == '赛季3X3保险箱'">
            <text class="label">保险箱数量</text>
            <el-input v-model="formData.safesNumber" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入保险箱数量，限制1-100个" />
            <!-- <div class="handle" @click="showSafesNumberPicker">
                <view class="selected-tag">
                    {{ formData.safesNumber === '' ? '请输入保险箱数量，限制1-100个' : formData.safesNumber
                    }}
                    <img src="../../assets/icons/arrow-down.png"></img>
                </view>
            </div> -->
        </div>

        <!-- 游戏账号 -->
        <div class="form-item" v-if="showOrder">
            <text class="label">游戏账号</text>
            <el-input v-model="formData.account" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的游戏账号" />
        </div>
        <!-- 游戏密码 -->
        <div class="form-item" v-if="showOrder">
            <text class="label">游戏密码</text>
            <el-input v-model="formData.password" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的游戏密码" />
        </div>
        <!-- 游戏角色 -->
        <div class="form-item" v-if="showOrder">
            <text class="label">游戏角色</text>
            <el-input v-model="formData.username" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的游戏角色名" />
        </div>
        <!-- 号主手机（必填） -->
        <div class="form-item" v-if="showOrder">
            <text class="label">号主手机（必填）</text>
            <el-input v-model="formData.phone" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入您的手机号" />
        </div>
        <!-- 发单者联系方式（必填） -->
        <div class="form-item" v-if="showOrder">
            <text class="label">发单者联系方式（必填）</text>
            <el-input v-model="formData.contact" style="width: 200px;height: 45px;margin-bottom: 10px;"
                placeholder="请输入发单者的联系方式" />
        </div>
    </div>





    <!-- 游戏区服选择弹窗 -->
    <el-dialog v-model="formData.serverPopup" title="请选择游戏区服" width="1000" :before-close="hideServerPicker">
        <div class="popup-content">
            <div class="body">
                <!-- 左侧导航栏 -->
                <div class="popup-nav">
                    <div v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                        :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                        {{ group.text }}
                    </div>
                </div>

                <!-- 右侧选择内容 -->
                <div class="popup-scroll">
                    <div v-if="selectedGroupIndex !== null" class="popup-group">
                        <div v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                            class="popup-item" @click="selectServerItem(item)">
                            {{ item.text }}
                        </div>
                    </div>
                    <div v-else class="popup-empty">请选择左侧分类</div>
                </div>
            </div>
        </div>
    </el-dialog>

    <!-- 代练类型选择弹窗 -->
    <el-dialog v-model="modePopup" width="1000" :before-close="hideModePicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in modeTree" :key="index" class="popup-item" @click="selectModeItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>
    <!-- 保底物资数量弹窗 -->
    <el-dialog v-model="guaranteedMaterialsPopup" width="1000" :before-close="hideGuaranteedMaterialsPicker">
        <view class="popup-content">
            <div scroll-y class="popup-scroll">
                <view v-for="(item, index) in guaranteedMaterialsTree" :key="index" class="popup-item"
                    @click="selectGuaranteedMaterialsItem(item)">
                    {{ item.text }}
                </view>
            </div>
        </view>
    </el-dialog>

    <!-- 代练任务（通行证）弹窗 -->
    <el-dialog v-model="currentLevelPopup" width="1000" :before-close="hideCurrentLevelPicker">
        <view class="popup-content">
            <view>
                <div class="level">
                    <span>当前等级</span>
                    <input type="number" placeholder="请输入当前等级" v-model="currentLevel">
                </div>
                <div class="role">
                    <span>目标等级</span>
                    <input type="number" placeholder="请输入目标等级" v-model="toLevel">
                </div>
            </view>
        </view>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="hideCurrentLevelPicker">取消</el-button>
                <el-button type="primary" @click="confirmCurrentLevelPicker">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 保险箱数量弹窗 -->
    <el-dialog v-model="safesNumberPopup" width="1000" :before-close="hideSafesNumberPicker">
        <view class="popup-content">
            <view>
                <div class="level">
                    <span>保险箱数量</span>
                    <input type="number" placeholder="请输入保险箱数量，限制1-100个" v-model="safesNumber">
                </div>
            </view>
        </view>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="hideSafesNumberPicker">取消</el-button>
                <el-button type="primary" @click="confirmSafesNumberPicker">确定</el-button>
            </div>
        </template>
    </el-dialog>









    <!-- 订单信息区域 -->
    <!-- <div class="orderMsg">
        <div class="pay">
            <img src="../../assets/icons/pay.png"></img>
            <div class="text">建议出价 <span style="color: red;">87元</span></div>
        </div>
        <div class="time">
            <img src="../../assets/icons/time.png"></img>
            <div class="text">预计时限 <span style="color: red;">47小时</span></div>
        </div>
    </div> -->
    <!-- 底部按钮 -->
    <!-- <div class="footer">
        <div class="button" @click="submitOrder()">下一步</div>
    </div> -->
    <div class="special-task" @click="changeShowOrder" v-if="!showOrder">
        <div class="label">预约下单</div>
    </div>
    <DLSJZsubmitOrder v-if="showOrder" :formDataInput="formData"></DLSJZsubmitOrder>
  </div>
</template>
<script>
import DLSJZsubmitOrder from '../../views/DL/SJZsubmitOrder/index.vue';

export default {
  name: 'SJZDL',
  components: {
    DLSJZsubmitOrder
  },
  data() {
    return {
      showOrder: false,
      // 区服数据
      serverTree: [
        {
          label: '安卓QQ',
          value: "安卓QQ",
          children: [
            { label: '默认服', value: "默认服" },
          ]
        },
        {
          label: '安卓微信',
          value: "安卓微信",
          children: [
            { label: '默认服', value: "默认服" },
          ]
        },
        {
          label: '苹果QQ',
          value: "苹果QQ",
          children: [
            { label: '默认服', value: "默认服" },
          ]
        },
        {
          label: '苹果微信',
          value: "苹果微信",
          children: [
            { label: '默认服', value: "默认服" },
          ]
        },
        {
          label: 'PC',
          value: "PC",
          children: [
            { label: '默认服', value: "默认服" },
          ]
        }
      ],
      selectedServerValue: ["安卓QQ", "默认服"], // For el-cascader v-model
      selectedGroupIndex: 0, // 当前选中的导航栏索引
      serverPopup: false,
      // 代练类型数据
      modeTree: [
        {
          text: '物资',
          value: "物资"
        },
        {
          text: '等级',
          value: "等级"
        },
        {
          text: '赛季3X3保险箱',
          value: "赛季3X3保险箱"
        },
      ],
      modeValue: "物资", // For el-select v-model
      modePopup: false,
      // 物资表单项
      selectMaterialValue: "护航", // For el-radio-group v-model
      // 保险格表单项
      selectInsuranceValue: "4格", // For el-radio-group v-model
      // 保底物资数量数据
      guaranteedMaterialsTree: [
        ...Array.from({ length: 40 }, (_, i) => ({
          text: `${(i + 1) * 50}W`,
          value: `${(i + 1) * 50}W`
        }))
      ],
      selectedGuaranteedMaterialsValue: "800W", // For el-select v-model
      guaranteedMaterialsPopup: false,
      // 订单任务数据
      orderTree: [
        { text: "必出护航非洲之心1个 未出0结算", value: "必出护航非洲之心1个 未出0结算" },
        { text: "必出护航非洲之心2个 未出0结算", value: "必出护航非洲之心2个 未出0结算" },
        { text: "必出护航非洲之心3个 未出0结算", value: "必出护航非洲之心3个 未出0结算" },
        { text: "护航非洲之心1个 未出则保底1300万物资", value: "护航非洲之心1个 未出则保底1300万物资" },
        { text: "护航非洲之心2个 未出则保底2500万物资", value: "护航非洲之心2个 未出则保底2500万物资" },
        { text: "护航非洲之心2个 未出则保底2500万物资", value: "护航非洲之心2个 未出则保底2500万物资" },
      ],
      orderValue: "800W", // For el-select v-model
      // 哈夫币数量数据
      hafuTree: [
        ...Array.from({ length: 20 }, (_, i) => ({
          text: `${(i + 1) * 50}W`,
          value: `${(i + 1) * 50}W`
        }))
      ],
      hafuValue: "800W", // For el-select v-model
      // 是否有保险
      insuranceFlag: false, // Renamed from insuranceFlag
      // 代练任务（通行证）区域
      currentLevelValue: '', // Renamed from currentLevel
      toLevelValue: '', // Renamed from toLevel
      currentLevelPopup: false,
      // 保险箱数量区域
      safesNumberValue: '', // Renamed from safesNumber
      safesNumberPopup: false,
      // 订单提交总数据
      formData: {
        selectedServer: ["安卓QQ", "默认服"], // Bind directly
        mode: '物资', // Bind directly
        selectMaterial: '护航', // Bind directly
        insuranceFlag: false, // Bind directly
        selectInsurance: '4格', // Bind directly
        selectedGuaranteedMaterials: '800W', // Bind directly
        order: '800W', // Bind directly (For 非洲之心)
        hafu: '800W', // Bind directly (For 哈夫币)
        currentLevel: '', // Bind directly
        toLevel: '', // Bind directly
        safesNumber: '', // Bind directly
        account: '', // Bind directly
        password: '', // Bind directly
        username: '', // Bind directly
        phone: '', // Bind directly
        contact: '', // Bind directly
        serverPopup: false, // Control dialog visibility
      },
    };
  },
  methods: {
    changeShowOrder() {
      this.showOrder = !this.showOrder;
    },
    // 区服选择
    showServerPicker() {
      // this.serverPopup = true; // Handled by el-dialog v-model="formData.serverPopup"
      this.formData.serverPopup = true;
    },
    hideServerPicker() {
      // this.serverPopup = false;
      this.formData.serverPopup = false;
    },
    selectGroup(index) {
      this.selectedGroupIndex = index;
    },
    selectServerItem(item) {
      // Update the v-model value for el-cascader
      this.formData.selectedServer = [this.serverTree[this.selectedGroupIndex].value, item.value];
      this.hideServerPicker();
    },
    // 代练类型选择
    showModePicker() {
      this.modePopup = true;
    },
    hideModePicker() {
      this.modePopup = false;
    },
    selectModeItem(item) {
      this.formData.mode = item.value; // Update formData directly
      this.hideModePicker();
    },
    // 保底物资数量
    showGuaranteedMaterialsPicker() {
      this.guaranteedMaterialsPopup = true;
    },
    hideGuaranteedMaterialsPicker() {
      this.guaranteedMaterialsPopup = false;
    },
    selectGuaranteedMaterialsItem(item) {
      this.formData.selectedGuaranteedMaterials = item.value; // Update formData directly
      this.hideGuaranteedMaterialsPicker();
    },
    // 是否有保险
    changeInsuranceFlag() {
        this.formData.insuranceFlag = !this.formData.insuranceFlag;
        if (!this.formData.insuranceFlag) {
            this.formData.selectInsurance = null; // Clear insurance selection if unchecked
        }
        console.log("保险", this.formData.insuranceFlag);
    },
    // 代练任务（等级）
    showCurrentLevelPicker() {
      // Transfer current values to temporary holders if needed, or bind directly
      // this.currentLevelValue = this.formData.currentLevel;
      // this.toLevelValue = this.formData.toLevel;
      this.currentLevelPopup = true;
    },
    hideCurrentLevelPicker() {
      // Reset temporary holders if used, or clear formData if cancellation means reset
      // this.formData.currentLevel = '';
      // this.formData.toLevel = '';
      this.currentLevelPopup = false;
    },
    confirmCurrentLevelPicker() {
      // Values are already bound via v-model in the template's el-input
      // No need to transfer from temporary variables if bound directly
      // this.formData.currentLevel = this.currentLevelValue;
      // this.formData.toLevel = this.toLevelValue;
      this.currentLevelPopup = false;
    },
    // 保险箱数量
    showSafesNumberPicker() {
      // this.safesNumberValue = this.formData.safesNumber;
      this.safesNumberPopup = true;
    },
    hideSafesNumberPicker() {
      // this.formData.safesNumber = '';
      this.safesNumberPopup = false;
    },
    confirmSafesNumberPicker() {
      // Value is already bound via v-model in the template's el-input
      // this.formData.safesNumber = this.safesNumberValue;
      this.safesNumberPopup = false;
    },
    // 订单提交 (Original function seems to be missing, adding based on intent)
    // The original submitOrder logic seemed incomplete and was commented out.
    // Assuming the main purpose is to pass formData to the child component.
    // If a direct navigation was intended:
    /*
    submitNavigationOrder() {
        // The original logic seemed to just navigate, passing the current state.
        // It didn't update formData based on individual refs before navigation.
        // Let's assume formData is kept up-to-date via v-model bindings.
        console.log("准备导航，提交订单数据", this.formData);
        this.$router.push({
            path: "/DL/SJZsubmitOrder",
            query: { formData: JSON.stringify(this.formData) } // Pass the main formData object
        });
    }
    */
  },
  mounted() {
    // onMounted logic goes here
  }
  // computed properties would go here if needed
};
</script>
<style scoped>
:deep(.el-input__wrapper) {
    height: 45px;
}
.special-task {
    width: 40%;
    border-radius: 16px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    /* margin-top: 5px; */
    /* padding: 20px; */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin: 50px auto;
    /* margin-left: 20px; */
}


.special-task .label {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    background-color: #6041e9;
    color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 16px;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.special-task .label:hover {
    cursor: pointer;
    background-color: #3105f8;
}
/* 表单样式 */
.form {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    padding: 24px 32px;
    background: #fff;
}

.form-item {
    width: 20%;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 16px;
    box-sizing: border-box;
}

.form-item .label {
    width: 100%;
    height: 100%;
    display: block;
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
}

.form-item .handle {
    width: 70%;

}

.picker,
.input {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: #666;
}

.selected-tag img {
    width: 24px;
    height: 24px;
    margin-left: 20px;
}

.input-group {
    display: flex;
    gap: 20px;
}

.input-group input {
    flex: 1;
    height: 80px;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    border: 1px solid #ccc;
}

.dual-picker {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tier-picker {
    flex: 1;
    position: relative;
}

.tier-picker::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.arrow {
    color: #666;
    font-size: 40px;
}

.picker {
    border-radius: 8px;
    padding: 0 20px;
    font-size: 28px;
    color: #666;
    background-color: #fff;
}

.picker::placeholder {
    color: #999;
}

/* 输入框聚焦样式 */
input:focus {
    border-color: #388aff;
    box-shadow: 0 0 10px rgba(26, 160, 53, 0.1);
}

/* 弹窗样式 */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
}

.time-selector {
    display: flex;
    align-items: center;
}

.time-scroll {
    overflow-y: auto;
    height: 500px;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.time-scroll .date-display {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #333;
    padding: 30px 0;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item {
    cursor: pointer;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 32px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.time-scroll .time-item.selected {
    color: #4080ff;
    font-weight: bold;
}

.time-scroll .time-item:last-child {
    border-bottom: none;
}

.level,
.role {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    font-size: 20px;
    box-sizing: border-box;
}

.level input,
.role input {
    width: 70%;
    outline: none;
    border: none;
    font-size: 20px;
}

.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 20px;
}

.popup-content .body {
    display: flex;
    height: 500px;
}

.popup-nav {
    display: flex;
    flex-direction: column;
    width: 200px;
    /* 根据需要调整宽度 */
    border-right: 1px solid #eee;
    padding: 20px 0;
}

.nav-item {
    padding: 20px;
    font-size: 20px;
    color: #666;
    cursor: pointer;
}

.nav-item.active {
    color: #388aff;
    font-weight: bold;
    border-left: 4px solid #388aff;
    padding-left: 16px;
}

.popup-scroll {
    flex: 1;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    max-height: 500px;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-item {
    padding: 20px;
    font-size: 20px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-item-title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-left: 20px;
}

.popup-item-body {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 20px;
}

.popup-item-body .popup-item-body-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    padding: 20px;
    border: 1px solid #aaa;
    border-radius: 7px;
    box-sizing: border-box;
    margin-left: 20px;
    margin-top: 20px;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28px;
    color: #999;
}

.popup-group {
    margin-bottom: 20px;
    max-height: 100%;
}

.popup-group-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 20px;
    text-align: center;
    font-size: 28px;
    box-sizing: border-box;

}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.orderMsg {
    width: 100%;
    display: flex;
    padding: 40px;
    box-sizing: border-box;
    padding-bottom: 200px;
}

.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orderMsg .pay img,
.orderMsg .time img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 20px;
    font-weight: 700;
}

.footer {
    width: 60%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    font-size: 25px;
}

.footer .tip {
    width: 100%;
    color: #aaa;
    background-color: #eee;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .button {
    width: 100%;
    height: 100px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all .3s;
}

.footer .button:hover {
    background: #3e91ff;
    cursor: pointer;
}
</style>